<template>
	<div>
		<div class="hyperlink-pages">
			<div @click="handleClick"><slot></slot></div>
			<el-dialog
				v-model="dialogVisible"
				:before-close="handleClose"
				title="选择页面"
				center
				width="362px"
				:destroy-on-close="true"
				:append-to-body="true"
			>
				<div class="hyperlink-detail" v-loading="loading">
					<div class="hyperlink-detail-search">
						<el-input
							placeholder="请输入内容"
							class="input-with-search"
							v-model="searchData"
						>
							<template #append>
								<el-button
									icon="el-icon-search"
									on-click="{handleSearch}"
								></el-button
							></template>
						</el-input>
					</div>
					<el-scrollbar height="196px">
						<el-radio-group
							v-model="select"
							v-infinite-scroll="load"
							@change="radiochange"
						>
							<el-radio
								v-for="(item, index) in pagesData"
								:label="item.id"
								:key="index"
							>
								{{ item.title }}
                                <!-- <el-tag size="mini">{{item.source}}.{{item.key}}</el-tag> -->
							</el-radio>
						</el-radio-group>
					</el-scrollbar>
				</div>
				<template #footer>
					<el-button @click="handleClose">取 消</el-button>
					<el-button type="primary" @click="handleConfirm">确 定</el-button>
				</template>
			</el-dialog>
		</div>
	</div>
</template>
<script lang="jsx">
import store from "/@/store";

export default {
	provide() {
		return {
			self: this
		};
	},
	props: {
		modelValue: {
			type: [String, Number, Boolean, Object, Array],
			default: ""
		},
		/**
		 * [visible description]
		 * @type {Object}
		 */
		visible: {
			type: Boolean,
			default: false
		},
		/**
		 * 执行的上传方法
		 * @type {Object}
		 */
		limit: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			dialogVisible: false,
			pagesData: [],
			cacheData: null,
			searchData: "",
			selectData: "",
			page: 1,
			loadmore: false,
			loading: false,
			select: ""
		};
	},
	/**
	 * 计算属性
	 * @type {Object}
	 */
	computed: {},
	/**
	 * 页面渲染前
	 * @return {[type]} [description]
	 */
	created() {},
	/**
	 * 数据监听
	 * @type {Object}
	 */
	watch: {
		searchData(value) {
			if (value == "") {
				this.pagesData = JSON.parse(JSON.stringify(this.cacheData));
				this.selectData = null;
			}
		},
		dialogVisible(newval) {
			this.selectData = JSON.parse(JSON.stringify(this.modelValue));
			this.select = this.selectData.id;
		}
	},
	/**
	 * 页面加载执行
	 * @return {[type]} [description]
	 */
	async mounted() {
		this.handleLoad();
	},
	methods: {
		handleLoad() {
			this.loading = true;
			store.service.magic.magic
				.page({ page: this.page, size: 20 })
				.then((res) => {
					this.loading = false;

					let { list, pagination } = res;
					if (pagination.page == 1) {
						this.pagesData = list;
						this.cacheData = JSON.parse(JSON.stringify(list));
					} else {
						if (list.length) {
							this.pagesData = this.pagesData.concat(list);
							this.cacheData = this.cacheData.concat(
								JSON.parse(JSON.stringify(list))
							);
						}
					}
					if (list.length < pagination.size) {
						this.loadmore = false;
					} else {
						this.loadmore = true;
					}
					this.page++;
				})
				.catch((error) => {
					this.loading = false;

					console.error("错误提示", error);
				});
		},
		handleSearch() {
			let value = this.searchData;
			let simpleArr = this.pagesData.filter((item, i) => {
				let str = ["", ...value, ""].join(".*"); //转化成正则格式的字符串
				let reg = new RegExp(str); //正则
				return reg.test(item.title); //去匹配待查询的字符串
			});
			this.pagesData = simpleArr;
			if (simpleArr.length === 1) {
				this.selectData = simpleArr[0];
			}
		},
		/**
		 * 处理点击事件
		 * @return {[type]} [description]
		 */
		handleClick() {
			this.dialogVisible = true;
		},
		/**
		 * 处理关闭事件
		 * @return {[type]} [description]
		 */
		handleClose() {
			this.dialogVisible = false;
		},
		radiochange(e) {
			console.log("radiochange", e);
			this.select = e;

			this.pagesData.forEach((element) => {
				if (element.id == e) {
					this.selectData = element;
				}
			});
			console.log("this.selectData", this.selectData);
		},
		/**
		 * 处理确认事件
		 * @return {[type]} [description]
		 */
		handleConfirm() {
			console.log("this.selectData", this.selectData);
			this.$emit("update:modelValue", this.selectData);
			this.dialogVisible = false;
		},
        load(){
            if(this.loadmore){
            this.handleLoad();
                
            }

        }
	}
};
</script>
<style lang="less" scoped>
@import "./style.less";
</style>
